<template>
  <div v-loading="loading">
    <div style="margin-left: 60%">
      <el-button type="info" @click="back">返回</el-button>
    </div>

    <!--    头部-->
    <div style="text-align: center;font-size: larger;font-weight: bold">
      {{ paperName }}
    </div>
    <el-divider></el-divider>
    <div style="margin-top: 10px;margin-right: 70%">
      <span style="font-weight: bold">【题量】</span><span style="color: #99a9bf"
                                                       v-html="UserAnswerDetailList.length"></span>
      <span style="font-weight: bold">【答题人】</span><span style="color: #99a9bf" v-html="realName"></span>
    </div>
    <div class="divDetail" v-for="(a,index) in UserAnswerDetailList" :key="a.id">
      <div>
        {{ index + 1 }}、<span v-html="a.examQuestion.questionContent"></span><span
          style="color: red">({{
          a.examQuestion.questionType == 1 ? '单选题' : a.examQuestion.questionType == 2 ? '多选题' : a.examQuestion.questionType == 3 ? '判断题' : '简答题'
        }})</span>
      </div>
      <div style="padding-top: 20px">
        <span style="font-weight: bold">【用户答案】</span> <span
          style="color: red">{{
          a.examQuestion.questionType != 3 ? a.userAnswer : a.userAnswer == 1 ? '正确' : '错误'
        }}</span>
      </div>
      <!--评分-->
      <div style="padding-top: 20px" v-if="a.examQuestion.questionType==4 && a.shortScore==1">
        【评分】<span v-html="a.score"></span>
      </div>
      <div style="padding-top: 20px"
           v-if="a.examQuestion.questionType==4 && a.userAnswerBean.isMarkSub==3 &&a.userAnswer!=null &&a.shortScore!=1">
        <el-input style="width: 14%"
                  placeholder="输入评分"
                  @change="test(score[index])"
                  oninput="value=value.replace(/[^\d]/g,'')"
                  v-model="score[index]"
                  clearable>
        </el-input>
        <el-button style="margin-left: 15px"
                   @click="submitScore(userId,paperId,score[index],a.questionScore,a.examQuestion.id)" type="success"
                   round>评分
        </el-button>
      </div>
      <div style="padding-top: 20px" v-if="a.examQuestion.questionType!=4">
        <span style="font-weight: bold">【得分】</span> <span style="color: red">{{ a.score == null ? 0 : a.score }}</span>
      </div>
      <div style="padding-top: 20px" v-if="a.examQuestion.questionType==4&&a.userAnswer==null">
        <span style="font-weight: bold">【得分】</span> <span style="color: red">{{ a.score == null ? 0 : a.score }}</span>
      </div>
      <div style="padding-top: 20px;padding-bottom: 20px">
        <span style="font-weight: bold">【本题分值】</span> <span style="color: red">{{ a.questionScore }}</span>
      </div>
      <div style="padding-top: 20px;padding-bottom: 20px" v-if="a.examQuestion.questionType!=4">
        <span style="font-weight: bold">【解析】</span>故答案为: <span
          style="color: red">{{
          a.examQuestion.questionType != 3 ? a.questionAnswer : a.questionAnswer == 1 ? '正确' : '错误'
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PaperDetail",
  data() {
    return {
      realName: null,
      loading: false,
      paperId: null,
      userId: null,
      score: [],
      paperName: null,
      UserAnswerDetailList: []
    }
  },
  methods: {
    submitScore(userId, paperId, score, questionScore, questionId) {
      if (score == null || score == '') {
        this.$message.error("请输入分数");
        return;
      }
      if (questionScore < score) {
        this.$message.error("评分不得高于本题分值");
        return;
      }
      this.$confirm('确认评分吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post("/answer/reviewScore/" + userId + "/" + paperId + "/" + score + "/" + questionId).then(resp => {
          if (resp.data.statusCode == 200) {
            this.$message({
              type: 'success',
              message: '评分成功!'
            });
            this.findDetail(this.paperId, this.userId);
          }
        })

      })
    },
    back() {
      this.$router.replace('/paper/userlist?paperId=' + this.paperId + "&paperName=" + this.paperName);
    },
    findDetail(paperId, userId) {
      this.loading = true;
      this.axios.get("/answer/findDetail/" + paperId + "/" + userId).then(resp => {
        if (resp.data.statusCode == 200) {
          this.UserAnswerDetailList = resp.data.data;

        }
        this.loading = false;
      })
    }
  },
  mounted() {
    this.paperId = this.$route.query.paperId;
    this.userId = this.$route.query.userId;
    this.paperName = this.$route.query.paperName;
    this.realName = this.$route.query.realName;
    this.findDetail(this.$route.query.paperId, this.$route.query.userId);
  }
}
</script>

<style scoped>
.divDetail {
  width: 80%;
  text-align: left;
  padding-left: 30px;
  border: 1px solid #ffffff;
  border-radius: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  padding-top: 10px;
}
</style>
